import React, { memo } from "react";
import { FooterWrapper } from "./style";
import classnames from "classnames";
import { isPathPartlyExisted } from "@/utils";
import { Link, useLocation } from "react-router-dom";

const Footer:React.FC<any> = () => {
  const { pathname } = useLocation();
  const arr = ["/search", "/navigation"];
  if (isPathPartlyExisted(arr, pathname)) {
    return null;
  }
  return (
    <FooterWrapper >
      <Link to="/home" className={classnames({active:pathname.indexOf('/home')!==-1})} >
        <i className='fa fa-home'></i>
        <span>首页</span>
      </Link>
      <Link to="/follow" className={classnames({active:pathname=='/follow'})}>
        <i className='fa fa-podcast'></i>
        <span>关注</span>
      </Link>
      <div className='add'>
          <div>
           <i className='fa fa-plus '/>
          </div>
      </div>
      <Link to="/shop" className={classnames({active:pathname=='/shop'})}>
        <i className='fa fa-book'></i>
        <span>集市</span>
      </Link>
      <Link to="/mine" className={classnames({active:pathname=='/mine'})}>
        <i className='fa fa-user'></i>
        <span>我的</span>
      </Link>
    </FooterWrapper>
  );
};

export default memo(Footer);
